<template>
	<div class="prepare-add-select">
		<el-form :model="ruleForm" :inline="true" :rules="required ? rules : null" ref="ruleForm" class="prepare-add-form">
			<el-form-item label="学段" prop="section">
				<el-select v-model="ruleForm.section" @change="getGrade" placeholder="请选择学段">
					<el-option v-for="item in sectionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年级" prop="grade">
				<el-select v-model="ruleForm.grade" @change="getSubject" placeholder="请选择年级">
					<el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="科目" prop="subject">
				<el-select v-model="ruleForm.subject" placeholder="请选择科目">
					<el-option v-for="item in subjectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	props: {
		required: {
			required: false,
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ruleForm: {
				section: '',
				grade: '',
				subject: '',
			},
			rules: {
				section: [{ required: true, message: '请选择学段', trigger: 'change' }],
				grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
				subject: [{ required: true, message: '请选择科目', trigger: 'change' }],
			},
            sectionUrl:['api/org/org','api/newlevel/platform_org'],
            gradeUrl:['api/org/org','api/newlevel/platform_org'],
            subjectUrl:['api/cate/subject','api/newlevel/platform_subject'],
			sectionData: [],
			gradeData: [],
            subjectData: [],
			edit: {
				section: '',
				grade: '',
				subject: '',
			},
		};
	},
	created() {},
	mounted() {
        this.getSection();
	},
	watch: {},
	computed: {
		CheckSchoolAppCode() {
			let code = sessionStorage.getItem('CheckSchoolAppCode');
			return code ? code : '00000000000000000000000000000000';
		},
		inx() {
			return this.$store.getters.isMulti ? 1 : 0;
		},
        sectionParam(){
            return [
                    {
                        level:2,
                        pid:1,
                        direction:'balance',
                    },
                    {
                        pid:1,
                        level: 2,
                        direction: 'down',
                        data_type: 'arr_all',
                        app_code: this.CheckSchoolAppCode
                    }
                ];
        },
        gradeParam(){
            return [
                    {
                        level:3,
                        pid:this.ruleForm.section,
                        type:2,
                        org_id:4,
                        status:1,
                    },
                    {
                        pid:this.ruleForm.section,
                        level: 3,
                        direction: 'down',
                        data_type: 'arr_all',
                        app_code: this.CheckSchoolAppCode
                    }
                ];
        },
        subjectParam(){
            return [
                    {
                        type:2,
                        org_id:this.ruleForm.grade,
                        sub_id:0,
                        status:1
                    },
                    {
                        org_id:this.ruleForm.grade,
                        status: 1,
                        app_code: this.CheckSchoolAppCode
                    }
                ];                
        },

	},
	methods: {
		getSection() {
            this.ruleForm.grade = '';
            this.gradeData = [];
            this.ruleForm.subject = '';
            this.subjectData = [];
            let success = res => {
                this.sectionData = res.data;
                this.ruleForm.section = this.edit.section ? this.edit.section : '';
                this.getGrade();
                this.edit.section = '';
			};
			this.$ajax({
				url: this.sectionUrl[this.inx],
				method: 'get',
				params: this.sectionParam[this.inx],
				func: { success: success }
			});
		},
		getGrade() {
            this.subjectData = [];
            this.ruleForm.subject = '';
			let success = res => {
                this.gradeData = res.data;
                this.ruleForm.grade = this.edit.grade ? this.edit.grade : '';
                this.getSubject();
                this.edit.grade = '';
			};
			this.$ajax({
				url: this.gradeUrl[this.inx],
				method: 'get',
				params: this.gradeParam[this.inx],
				func: { success: success }
			});
		},
		getSubject() {
            let success = res => {
                this.subjectData = res.data;
                this.ruleForm.subject = this.edit.subject ? this.edit.subject : '';
                this.edit.subject = '';
			};
			this.$ajax({
				url: this.subjectUrl[this.inx],
				method: 'get',
				params: this.subjectParam[this.inx],
				func: { success: success }
			});
		},
		valid() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				}
			});
		},
		reset() {
			this.$refs.ruleForm.resetFields();
		},
		setDefault() {
			this.ruleForm = {
				section: '',
				grade: '',
				subject: '',
			};
		}
	}
};
</script>
<style lang="scss">
.prepare-add-form {
	width: 98%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
</style>
